From db2f142aaf98ba36d1e9b17ce8a4299268d1b69b Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Tue, 28 Jul 2026 15:29:32 +0200
Subject: feat: editable name and category in grocery detail page

---
 src/routes/grocery/[id]/+page.svelte | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

(limited to 'src/routes/grocery/[id]/+page.svelte')

diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index a49d037..a7e0bc9 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -2,17 +2,30 @@
 	import { enhance } from '$app/forms';
 
 	let { data, form } = $props();
+	let name = $state(data.item.name);
+	let categoryId = $state(data.item.categoryId ?? -1);
 	let reference = $state('');
 	let price = $state('');
 	let unit = $state('€/kg');
 	let qualityScore = $state('');
 </script>
 
-<h1>{data.item.name}</h1>
-
-{#if data.item.categoryName}
-	<p class="category">{data.item.categoryName}</p>
-{/if}
+<form class="form-card" method="POST" action="?/update" use:enhance>
+	<label>
+		<span class="form-label">Nom</span>
+		<input class="form-input" type="text" name="name" bind:value={name} />
+	</label>
+	<label>
+		<span class="form-label">Catégorie</span>
+		<select class="form-select" name="category_id" bind:value={categoryId}>
+			<option value={-1}>—</option>
+			{#each data.categories as cat (cat.id)}
+				<option value={cat.id}>{cat.name}</option>
+			{/each}
+		</select>
+	</label>
+	<button class="btn-primary" type="submit">Enregistrer</button>
+</form>
 
 <hr />
 
@@ -110,13 +123,6 @@
 <a href="/" class="back-link">&larr; Retour à la liste</a>
 
 <style>
-	.category {
-		color: var(--text-secondary);
-		font-size: 0.9375rem;
-		font-weight: 500;
-		margin-top: 0.25rem;
-	}
-
 	.ref-row {
 		display: flex;
 		gap: 0.75rem;
-- 
cgit v1.3